<template>
  <div class="login">
    <el-card class="login-card">
      <div class="title">EZOps运维平台</div>
      <!-- header插槽 -->
      <!-- <template #header>
        <div class="login-card-header">
          <span>K8S平台 用户登录</span>
        </div>
      </template> -->
      <!-- ref设置后，在script中能使用this.$refs拿到对应的对象，用于验证和reset表单数据 -->
      <el-form :model="loginForm" :rules="loginFormRules" ref="loginForm">
        <!-- prop用于与rules的值对应，验证表单 -->
        <el-form-item prop="username">
          <!-- prefix-icon 输入框前面的图标 clearable  清除功能 -->
          <el-input
            prefix-icon="UserFilled"
            v-model.trim="loginForm.username"
            maxlength="32"
            placeholder="请输入账号"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <!--  prefix-icon 输入框前面的图标 -->
          <!--  clearable  清除功能  -->

          <el-input
            prefix-icon="Lock"
            v-model.trim="loginForm.password"
            maxlength="16"
            placeholder="请输入密码"
            clearable
            show-password
          >
          </el-input>
        </el-form-item>

        <el-form-item style="width: 100%">
          <el-button
            type="primary"
            ize="medium"
            style="width: 100%; border-radius: 2px"
            :loading="loginLoading"
            @click="handleLogin('loginForm')"
          >
            <span v-if="!loginLoading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
      <!--  底部  -->
    </el-card>
  </div>
</template>

<script>

export default {
  name: "LoginIndex",
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      },
      loginFormRules: {
        username: [
          {
            required: true,
            message: "请填写用户名",
            trigger: "change",
          },
          { min: 3, message: "用户名长度应不小于3个字符", trigger: "blur" },
        ],
        password: [
          {
            required: true,
            message: "请填写密码",
            trigger: "change",
          },
          { min: 6, message: "密码长度应不小于6个字符", trigger: "blur" },
        ],
      },
      loginLoading: false,
    };
  },

  methods: {
    handleLogin(formName) {
      // 提交前预验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post("/user/login/", this.loginForm).then((response) => {
            if (response.code == 20000) {
              console.log("login.vue code ==", response.code);
            //   this.$message.success("登录成功");
              //   保存token到会话存储
              //   console.log('login.vue :',response.data.access.replace(/[\r\n]/g,""))
              window.sessionStorage.setItem("token", response.data.token);
              window.sessionStorage.setItem("username", response.data.username);
              window.sessionStorage.setItem("expire", response.data.expire);
              this.$router.push("/dashboard"); // 跳转页面
            }
          });
        } else {
          this.$message.error("用户名或密码格式错误！");
        }
      });
    },
  },
};
</script>

<style scoped>
/* scoped用于设置的css样式只在当前组件页面生效 */
.login {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(../../assets/login-bg.jpg);
  background-size: 100% 100%; /* 平铺 */
}
.login-card {
  position: absolute;
  top: 27%;
  left: 0;
  right: 0;
  margin: auto;
  width: 325px;
  background: rgb(255, 255, 255);
  border-radius: 5px; /* 边框圆角弧度 */
  box-shadow: 0 5px 20px 0 #e8e8e8; /* 阴影光圈效果 */
  line-height: 40px;
  font-size: 12px;
  letter-spacing: 1px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #353739;
  text-align: center;
  margin-bottom: 20px;
}

.login-card-header {
  text-align: center; /* 居中显示文本 */
}
    
</style>
